<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>发送请求</button>
  <button>取消请求</button>

  <script>
    /* 
    xhr常用语法
    new XMLHttpReuest() 创建xhr对象
    open(method, url) 设置请求必要信息
    send(data) 发请求
    setRequestHeader(name, value) 设置请求头
    onreadystateChange 绑定readyState改变的监听, 用于读取响应数据
    readyState 只读属性, 当为4代表请求完成了
    status 响应状态码
    getResponseHeader(name) 根据响应头名称得到对应值
    reponseText 响应体文本
    reponseType='json' 让内部自动解析json数据
    response 得到已经解析好的js对象/数组
    timeout: 指定超时时间
    onTimeout: 绑定超时错误的监听
    abort(): 中断/取消请求 => 服务器处理了请求, 但浏览器放弃响应数据
    */
   
    const btns = document.querySelectorAll('button')
    let xhr
    btns[0].onclick = () => {
      xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:8081/delay-server')
      // 指定超时事件 开发中一般会指定为20-30s
      xhr.timeout = 2000 // ms为单位
      // xhr.timeout = () =>{
      //   // console.log('超时错误');
      //   alert('超时错误!')
      // }
      xhr.onreadystatechange = () => {
        // 打印数据
        console.log(xhr.readyState, xhr.status, xhr.responseText)
        if (xhr.readyState === 4) {
          console.log('---', xhr.status, xhr.responseText);
        }
      }
      // 发送请求
      xhr.send()
    }
    btns[1].onclick = () => {
      xhr.abort()
      console.log('中断请求');
    }
  </script>
</body>

</html>